<template>
    <div>
        <div>
            <div class="img-box">
                <img src="../../assets/image/transport.jpg" alt="" id="img">
            </div>
            <div class="white_area">
                <div class="tit1">
                    <span>营业时间</span>
                </div>
                <div class="tit2">
                    10:00 - 19:30
                </div>
            </div>
            <div class="title-box">
                <div class="title-title">
                    <span>制定路线</span><br><br>
                    <pre>
            首先，你需要确定路线，无论你准备沿着滇池南下还是游历其他城市， 
        你都需要大概定下自己每日行程，围绕自己每天过夜酒店和知名地标以
        及不得不去的地点制定大概路线，这样可以在旅行中留给自己一些心血
        来潮的空间————沿途看到了什么有意思的风景，就可以暂时偏
        离路线去探索一番，最精彩的冒险往往发生在计划之外。</pre>
                </div>
            </div>


        </div>
        <div class="transport-box">
            <div class="div1">
                <span>古滇直通车：</span>
                <pre>
    <span style="color:blue; font-size: 18px;">去程：</span>
        <span style="color:blue; font-size: 18px;">南亚风情第壹城</span>                                                                     
    平日：10:00。
    周末：10：00； 11：00。                                  
    古滇返程：20:30   
    闭园后20分钟。
        <span style="color:blue; font-size: 18px;">七彩第壹城站：</span>
    平日：10:30。
    周末：10:30；11:30。

    <span style="color:blue; font-size: 18px;">返程：</span>
    平日：10:30。
    欢乐世界正门出口左转100米处乘车点。
    平日：欢乐世界闭园后20分钟。
    周末：18:00；欢乐世界闭园后20分钟。

</pre>
            </div>
            <div class="div2">
                <span>公交专线：</span>
                <pre>
    <span style="color:blue; font-size: 18px;">去程：</span>
        <span style="color:blue; font-size: 18px;">古滇K31专线</span>                                                                     
    出发站台：海埂公园（滇池路）
    时间：8:00--18:00                                  
        <span style="color:blue; font-size: 18px;">古滇K38专线</span>
    出发站台：昆明南站（高铁站）
    时间：06:30--18:30

</pre> <span>地铁专线：</span>
                <pre>
        乘坐地铁1号线至大学城南站下，打车至七彩云南古滇名城度假区
        乘坐地铁1号线至昆明高铁南站下，转乘K38至七彩云南古滇名城度假区                                 
</pre><span>自驾导航：</span>
                <pre>
        七彩云南·欢乐世界（停车场） ：云南省昆明市晋宁区----即可停车至停车场                            
</pre>
            </div>
            <div class="div3">
                <span>古滇片区免费接驳车：</span>
                <pre>
                                                                    
    营运时间：首发9:30
    末班：欢乐世界闭园后5分钟
    节假日间隔每半小时一班
    平日间隔每小时一班
    末班车为乐园闭园5分钟后从小镇出发                               
    停靠站点：
    古滇活力康养园区（古滇度假酒店）→古滇温泉（繁花里）→
    古滇博物院→古滇精品湿地→七彩云南·欢乐世界→
    古滇皇冠假日酒店（七彩云南生活馆）→古滇皇冠假日酒店→
    七彩云南·欢乐世界（P5停车场）→古滇博物院→古滇温泉山庄→
    古滇活力康养园区（古滇度假酒店）

</pre>
            </div>
        </div>
    </div>

</template>
<script>
export default {
    name: "TranSport",
    data() {
        return {

        }
    }
}
</script>
<style>
#img {
    position: relative;
    float: left;
}

.white_area {
    font-size: 25px;
    background: url(../../assets/image/time-back.png) center center;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 20px;
    
    white-space: nowrap;
    /*文本不换行*/
}

.title-box {
    width: 200px;
    font-size: 25px;

    white-space: nowrap;
}

.title-title {
    position: relative;
    left: 10vh;
    top: 6vh;
    white-space: nowrap;
    /*文本不换行*/
    font-size: 20px;


}

.title-title span {
    position: relative;
    left: 25px;
    font-size: 35px;
    white-space: nowrap;
    /*文本不换行*/
}

.transport-box {
    
    width: 100%;
    display: flex;

}

.div1 {
    width: 30%;
    height: 100%;
    flex: 1;
}

.div1 span {
    font-size: 35px;
    color: red;
}

.div2 {
    width: 30%;
    height: 100%;
    flex: 1;

}

.div2 span {
    font-size: 35px;
    color: red;
}

.div3 {
    width: 30%;
    height: 100%;
    flex: 1;

}.div3 span {
    font-size: 35px;
    color: red;
}
</style>